<template>
  <div>
    <el-form class="query-table-form" @submit.native.prevent :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="项目名称查询"
          clearable
          @change="getAllData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.corp_name"
          placeholder="负责人查询"
          clearable
          @change="getAllData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="地址查询"
          auto-top
          clearable
          @change="getAllData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getAllData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:address="scope">
        <el-tooltip effect="light" :content="scope.row.address">
          <div class="text-truncate">{{ scope.row.address }}</div>
        </el-tooltip>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getAllData"
      ></el-pagination>
    </div>

    <attach-file :customerRelatedId="attachId" :visible.sync="attachVisible"></attach-file>

    <contract-approve-dialog
      :visible.sync="editVisible"
      :query-id="editQueryId"
      @success="handleSuccess"
    ></contract-approve-dialog>

    <el-dialog
      :visible.sync="reportVisible"
      :close-on-click-modal="false"
      append-to-body
      top="30px"
      width="80%"
    >
      <el-tabs v-model="active">
        <el-tab-pane label="合同审批表" name="first">
          <contract-approve
            :query-id="relatedData.customer_related_id"
            :process-status="relatedData.process_status"
            view-mode
          ></contract-approve>
        </el-tab-pane>
        <el-tab-pane label="合同附件" name="contract">
          <contract-guard-view :query-id="relatedData.customer_related_id"></contract-guard-view>
        </el-tab-pane>
        <el-tab-pane label="担保意向函" name="letter" v-if="+relatedData.ele_letter_status > 0">
          <letter-view :query-id="relatedData.customer_related_id"></letter-view>
        </el-tab-pane>
        <el-tab-pane label="附件">
          <attach-view
            :query-id="relatedData.customer_related_id"
            :visible="reportVisible"
          ></attach-view>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import SelectAddress from '@/components/select/SelectAddress'
import AttachFile from '@/credit/views/city/program/Attach'

import taskTableMixin from '@/credit/mixin/self/taskTable'

import { enumGuatype } from '@/credit/plugins/enumTown'
import ContractApproveDialog from '@/credit/views/city/self/components/contractApprove/MainDialog'

import ContractGuardView from '@/credit/views/county/unionProvince/components/ContractGuardView'
import LetterView from '@/credit/views/county/unionProvince/components/LetterView'
import AttachView from '@/credit/components/AttachView'
import ContractApprove from '@/credit/views/city/self/components/contractApprove/Main'
import { getFollow } from '@/credit/mixin/taskTableCountyUnionProvince'
export default {
  components: {
    SelectAddress,
    AttachFile,
    ContractApproveDialog,
    ContractGuardView,
    LetterView,
    AttachView,
    ContractApprove,
  },
  mixins: [taskTableMixin],
  props: {},
  data() {
    return {
      params: {
        index: 1,
        size: 10,
        customer_name: '',
        corp_name: '',
        address_code: '',
        'gua_type.eq': 2,
        'contract_approval_status.eq': 1,
        subKey: 'contract_approval.customer_related_id',
        'confuse_status.neq': 3,
      },
      order: {
        contract_time: 'DESC',
      },
      useRegisterTable: true,
      tableColumns: [
        {
          attrs: { label: '主体名称', prop: 'customer_name', minWidth: '120px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '业务类型', prop: 'guaType', align: 'center' } },
        { attrs: { label: '地址', prop: 'address' }, slot: 'address' },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center' } },
        {
          attrs: { label: '合同审批时间', prop: 'contractFinishDate', align: 'center', width: 100 },
        },
        { attrs: { label: '合作银行', prop: 'bank_name', align: 'center' } },
        { attrs: { label: '待处理人员', prop: 'itemStatusLabel', align: 'center' } },
        {
          attrs: { label: '操作', align: 'center', minWidth: 120 },
          operations: [
            {
              content: '合同审批',
              icon: 'fa fa-gavel',
              event: this.handleEdit,
              ifRender: row => row.editEnable,
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.hanleView,
            },
          ],
        },
      ],

      // 放款通知书
      editQueryId: '',
      editVisible: false,

      // 担保合同
      relatedData: {},
      reportVisible: false,

      // 附件
      attachId: '',
      attachVisible: false,
      authPerson: {},
      riskManager: {},
      active: 'first',
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getAllData()
  },
  mounted() {},
  methods: {
    async getAllData(index = 1) {
      await this.getData(index)
      const record = await getFollow(this.tableData, 'CONTRACT_APPROVAL_DIR')
      this.tableData = this.tableData.map(it => {
        const data = record.find(item => item.wf_related_id === it.customer_related_id) || {}
        it.itemStatusLabel = data.innerFollow || ''
        it.editEnable = data.task_person?.includes(this.userId) ?? false
        return it
      })
    },
    dataAdapter(item) {
      item.guaType = enumGuatype[item.gua_type] || '-'
      item.contractTime = this.$utils.dateFormat(item.contract_time, 'yyyy-MM-dd')

      item.submitType = +item.submit_type
      item.isGovSubmit = item.submitType === 1

      const approval = item.contract_approval?.[0] || {}
      item.contractFinishDate = this.$utils.dateFormat(approval.res_a_date, this.dateFmt)

      return item
    },
    handleAttach(row) {
      this.attachId = row.customer_related_id
      this.attachVisible = true
    },
    handleEdit(row = {}) {
      this.editQueryId = row.customer_related_id || ''
      this.editVisible = true
    },
    hanleView(row) {
      this.active = 'first'
      this.relatedData = row
      this.reportVisible = true
    },
    handleSuccess() {
      this.$store.dispatch('getTaskCount')
      this.getAllData()
    },
  },
}
</script>
<style lang="scss" scoped></style>
